(function () {
    let index, sum; //遮罩层用
    let ids; //节流？优化效果，让短时间内连续多次点击left和right不触发
    let couponid = location.search.slice(1).split("=")[1] //利用location.search解析url？后面的数据
    init()

    function init() {
        getData()
        $("#marsk .delete").click(deleteMarst) //点×退出遮罩层；
        $("#main .goodsList").on("click", "li", clickHandler) //li设置点击事件
        $("#marsk .content>span").click(carousel) //左右按钮设置点击事件
        $("footer>.nav li").eq(2).click(clickTop) //返回顶部
    }

    function getData() {
        $.ajax({
            url: 'http://chst.vip:1234/api/getcouponproduct',
            data: {
                couponid: couponid
            }
        }).then(res => {
            createGoodsList(res.result) //创建商品列表
            sum = res.result.length;
        })
    }

    function createGoodsList(data) { //创建商品列表
        let html = data.reduce((value, item) => {
            return value += `
                <li couponProductId=${item.couponProductId}>
                    <div class='left'>
                        ${item.couponProductImg}
                    </div>
                    <div class='right'>
                        <h4 class='title'>${item.couponProductName}</h4>
                        <p class='price'>${item.couponProductPrice}</p>
                        <p class='time'>${item.couponProductTime}</p>
                    </div>
                </li>
            `
        }, '')
        let img = data.reduce((value, item) => {
            return value += `${item.couponProductImg}`
        }, '')
        $("#main .goodsList").html(html)
        //根据数据创建轮播图图片，并且设置imgCon的宽度
        $("#marsk .imgCon").css({
            width: `${data.length}` * 5.33 + 'rem'
        }).html(img)
    }

    function clickHandler() { //点击出现遮罩层
        if ($(this)[0].nodeName === "LI") {
            index = `${$(this).attr("couponProductId")}` //couponProductId动态创建时根据数据添加的属性,属性值代表第几个图片
            $("#marsk").css({
                top: 0
            }).find(".imgCon").css({
                left: -index * 5.33 + "rem"
            }); //点击Li直接跳转，无需动漫效果
        }
    }

    function deleteMarst() { //点×退出遮罩层；
        $("#marsk").css({
            top: "-100%"
        })
    }

    function carousel() { //轮播
        if (ids) return; //ids定义没有初始值是undefined = false; 所以第一次不触发return
        ids = setTimeout(function () { //给ids赋值 此时ids是true;
            clearTimeout(ids)
            ids = undefined;
        }, 500) //500毫秒内ids是true无法进入事件，500毫秒后将定时去除，给ids赋值undefined也就是false就可以触发事件
        if ($(this).attr("class") === "left") {
            index--;
            if (index < 0) {
                alert("已经是第一页了")
                index = 0;
                return;
            }
            $("#marsk").find(".imgCon").animate({
                left: -index * 5.33 + "rem"
            }, 500); //轮播动画效果
        } else if ($(this).attr("class") === "right") {
            index++;
            if (index > sum - 1) { //sum是上文获取的数据长度，因为第一个图片不需要移动，最后一张图要往前移动总数-1
                alert("已经是最后一页了")
                index = sum - 1;
                return;
            }
            $("#marsk").find(".imgCon").animate({
                left: -index * 5.33 + "rem"
            }, 500); //轮播动画效果
        }
    }

    function clickTop() {
        $("html").stop().animate({
            scrollTop: 0
        }, 200)
    }
}())